<template>
	<view>
		<button type="default" @click="bgStyle">动态设置窗口的背景色(小程序)</button>
		<button type="default" @click="bgTextStyle1">动态设置下拉背景字体、loading 图的样式1(小程序)</button>
		<button type="default" @click="bgTextStyle2">动态设置下拉背景字体、loading 图的样式2(小程序)</button>
		<view>正在监听窗口变化</view>
		<view>变化后的窗口宽度={{sizeWidth}}</view>
		<view>变化后的窗口高度={{sizeHeight}}</view>
		<button type="default" @click="goback">返回上一页(触发onUnload里面的取消监听方法)</button>
		<view v-for="(item,index) in 80" :key="index">
			{{index}}
		</view>
		<button type="default" @click="gotop">回到顶部</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sizeWidth:0,
			sizeHeight:0
		};
	},
	onShow(){
		let _this = this;
		console.log('开始监听');
		uni.onWindowResize((res) => {
				_this.sizeWidth = res.size.windowWidth
				_this.sizeHeight = res.size.windowHeight
		    // console.log('变化后的窗口宽度=' +  = res.size.windowWidth)
		    // console.log('变化后的窗口高度=' + res.size.windowHeight)
		})
	},
	onUnload(){
		console.log('取消监听');
		uni.offWindowResize(() => {
		    console.log('取消监听窗口尺寸变化事件')
		})
	},
	methods: {
		bgStyle() {
			uni.setBackgroundColor({
				backgroundColor: '#ffffff',
				backgroundColorTop: '#222222',
				backgroundColorBottom: '#333333'
			});
		},
		bgTextStyle1() {
			uni.setBackgroundTextStyle({
				textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
			});
		},
		bgTextStyle2() {
			uni.setBackgroundTextStyle({
			 textStyle: 'light' // 下拉背景字体、loading 图的样式为dark
			});
		},
		gotop(){
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100
			});
		},
		goback(){
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style scoped></style>
